<template>
	<view class="bgbox">
		<un-navbar titleText="通讯录" :isBack="false" :bgImgtype="1">
			<template #content>
				<image src="../../static/image/addressbook/adds2.png" class=" addsclass po_abs" @click="goaddfriends"></image>
			</template>
		</un-navbar>
		<view class="search pa24 po_fixed wi_100">
			<view class="flex align_center search_box bg_white flex1 pa_lr30">
				<view class="iconfont i-fdj te_black9 ma_right20"></view>
				<input class="flex1 f_s28" v-model="state.name" confirm-type="search" maxlength="30" @confirm="searchName" placeholder="请输入关键词搜索" />
			</view>
		</view>
        <view class="zhanwei"></view>
		<scroll-view class="scroll-view" :style="`height:calc(100vh - ${navigationinfo.allHeight}px - 96upx);`" scroll-y="true" :scroll-into-view="currentIndex">
			<!-- <view class="bg_img ma24 po_rel">
				<image class="bg_img" src="../../static/image/addressbook/1.png"></image>
				<image class="avatar bo_radius30" style="right:60px;" src="https://img2.baidu.com/it/u=3702685885,4113095768&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></image>
				<image class="avatar bo_radius30" style="right:36px;" src="https://img2.baidu.com/it/u=3702685885,4113095768&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></image>
				<image class="avatar bo_radius30" style="right:12px;" src="https://img2.baidu.com/it/u=3702685885,4113095768&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></image>
			</view> -->
			<view class="bg_white ma_lr24 ma_top30 flex align_center pa_lr24 pa_tb20 bo_radius22" @click="gonewfriends">
				<image class="icon1" src="../../static/image/addressbook/2.png"></image>
				<view class="pa_left30 flex align_center justify_between flex1">
					<view class="f_s30 fw_bold">新的朋友</view>
					<view class="f_s24 te_black9 iconfont i-right"></view>
				</view>
			</view>
			<view v-if="!state.nodata" class="nodata te_center">
				<image class="nodata_img" src="@/static/image/nodata.png"></image>
				<view class="f_s32 te_black6 pa_top40">暂无内容</view>
			</view>
			<view v-if="state.nodata">
				<view v-for="(item, index) in userlist" :key="index" :id="'index-' + index">
					<view class="pa24 f_s26 te_black9 pa_lr20">{{ item.letter }}</view>
					<view class="bg_white ma_lr24 bo_radius20 pa_tb10">
						<view class="pa_lr24 flex align_center" v-for="(country,indexs) in item.userlist" :key="country.name" @click="gouserinfo(country)">
							<image class="head_img bo_radius30 ma_right24" :src="country.contact_user_avatar || 'https://vpay-static.oss-cn-shenzhen.aliyuncs.com/static/unmanned/images/main/morentouxiang.png'"></image>
							<view class="flex align_center justify_between pa_tb40 flex1 f_s30" :class="item.userlist.length-1 == indexs ? '' : 'line_bottom'">{{ country.remark_name }}</view>
						</view>
					</view>
				</view>
				<view class="pa_top30"></view>
			</view>
		</scroll-view>
		<!-- 索引 -->
        <view class="index_box flex flex_column align_center justify_center">
            <view class="aaaa">
                <view class="f_s18 pa_lr10 fw_bold index_box_line" v-for="(item, index) in userlist" :key="index" @click="scrollToIndex" @touchmove="scrollTouchmove" :data-index="index">
                    {{ item.letter }}
                </view>
            </view>
        </view>
	</view>
</template>

<script setup lang="ts">
	import { user_contact_query } from "@/api/addressbook";
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive, nextTick } from 'vue'
	import { useStore } from 'vuex'
	import { useGroupUsersByPinyin } from '@/utils/utils'
	const store = useStore()

	const navigationinfo = ref<any>(uni.getStorageSync('navigationinfo'))
	const formattedUserList = ref<any>([])
	const userlist = ref<any>([])
	const currentIndex = ref('')
    const top = ref(0)
	const height = ref(0)
	const state = reactive<any>({
		name: '',
		nodata: false
	})
	const query = uni.createSelectorQuery().in(this)

	onShow((options) => {
		getlist()
        nextTick(()=>{
            query.select(".aaaa").boundingClientRect((data:any) => {
                top.value = data.top
            }).exec();
        })
    })

	const getlist = () => {
		user_contact_query({
			pagination: {
				page: 1,
				size: 5000
			},
			filter: {}
		}).then((res:any) => {
			if(res.data.items.length > 0){
				res.data.items.map((item:any)=>{
					item.remark_name = item.remark_name || item.contact_user_name_cn
				})
				formattedUserList.value = useGroupUsersByPinyin(res.data.items,'remark_name').formattedUserList.value
				userlist.value = formattedUserList.value
				state.nodata = true
				nextTick(()=>{
					query.select(".index_box_line").boundingClientRect((data:any) => {
						height.value = data.height
					}).exec();
				})
			}else{
				state.nodata = false
			}
		}).catch((err:any) => {
			state.nodata = false
		})
	}
	const searchName = () => {
        if(state.name == ''){
            userlist.value = formattedUserList.value
            return
        }
        userlist.value = formattedUserList.value
            .map((e:any) => {
                return {
                    ...e,
                    userlist: e.userlist.filter((item:any) => {
                        return item.name.includes(state.name)
                    })
                }
            })
        userlist.value = userlist.value.filter((e:any) => e.userlist.length > 0)
    }
	const goaddfriends = () => {
		uni.navigateTo({
			url: '/subPackages/addressbook/addfriends/index'
		})
	}
	const gonewfriends = () => {
		uni.navigateTo({
			url: '/subPackages/addressbook/newfriends/index'
		})
	}
	const gouserinfo = (e:any) => {
		uni.navigateTo({
			url: '/subPackages/addressbook/userinfo/index?type=1&system_code='+e.contact_user_system_code
		})
	}
	const scrollToIndex = (e:any) => {
        currentIndex.value = 'index-' + e.currentTarget.dataset.index
    }
    const scrollTouchmove = (e:any) => {
        const touch = e.touches[0]
        const clientY = touch.clientY
        const index = Math.floor((clientY - top.value) / height.value)
        currentIndex.value = 'index-' + index
    }

</script>

<style scoped lang="scss">
	.bgbox {
		width: 100vw;
		height: 100vh;
		
		.addsclass {
			width: 40upx;
			height: 40upx;
			top: 0;
			right: 24upx;
			bottom: 0;
			margin: auto 0;
		}
		.search{
            background: #F1F4F4;
            z-index: 9;
            .search_box {
                height: 72upx;
                border-radius: 36upx;
            }
        }
        .zhanwei{
            height: 96upx;
        }
		.bg_img{
			width: 702upx;
			height: 136upx;
		}
		.avatar{
			position: absolute;
			width: 64upx;
			height: 64upx;
			border: 1px solid #2DA9E7;
			top: 36upx;
		}
		.icon1{
			width: 80upx;
			height: 80upx;
		}
		.index_box{
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            .index_box_line{
                line-height: 30upx;
            }
        }
		.head_img{
            width: 76upx;
            height: 76upx;
        }
        .line_bottom{
			border-bottom: 1px solid #F6F6F6;
		}
	}
</style>